<template>
    <!-- 搜索 -->
    <div class="search-container">
        <div class="form-content">
            <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                <el-form-item label="所在空间">
                    <el-select
                        v-model="filterForm.dtTenant" 
                        placeholder="请选择所在空间"
                        clearable
                    >
                        <el-option v-for="(item) in tenantList" 
                        :key="item.tenant"
                        :value="item.tenant"
                        :label="item.tenantName" 
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="组织名称">
                    <el-input maxlength="200"  clearable v-model.trim="filterForm.institutionName" placeholder="请输入组织名称" />
                </el-form-item>
                <el-form-item label="组织ID">
                    <el-input maxlength="200" clearable v-model.trim="filterForm.institutionId" placeholder="请输入精确的组织ID" />
                </el-form-item>
                <el-form-item label="所在地区">
                    <!-- <el-cascader placeholder="请选择所在地区" v-model="filterForm.areaid" :options="searchAreaList" clearable/> -->
                    <el-cascader 
                        ref="areaRef"
                        placeholder="请选择所在地区" 
                        v-model="filterForm.areaid" 
                        :props="areaProp"
                        clearable
                        :options="searchAreaList"
                    />
                </el-form-item>
                <el-form-item label="组织类型">
                    <el-select v-model="filterForm.institutionType" placeholder="请选择组织类型" clearable>
                        <el-option v-for="(item) in institutionList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="组织级别">
                    <el-select v-model="filterForm.institutionLevel" placeholder="请选择组织级别" clearable>
                        <el-option v-for="(item) in institutionLevelList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属学段">
                    <el-select v-model="filterForm.stageId" placeholder="请选择所属学段" clearable>
                        <el-option v-for="(item) in stageList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="组织属性">
                    <el-select v-model="filterForm.institutionAttribute" placeholder="请选择组织属性" clearable>
                        <el-option v-for="(item) in institutionAttrList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <date-range ref="dateRef"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted, onBeforeUnmount } from 'vue'
import DateRange from '@/components/date-range.vue';
import { useStore } from 'vuex'
import { useRoute } from 'vue-router';

import { 
    institutionList, 
    institutionAttrList, 
    institutionLevelList,
    institutionObj,
    institutionLevelObj,
    institutionAttrObj
} from '../filter-data.js'
import { useStageList } from '@/hooks/useStageList'
import { useSearchAreaList } from '@/hooks/useSearchAreaList'
import { useAllAreaList } from '@/hooks/useAllAreaList'
export default defineComponent({
    // name:'',
    props: {
        // 空间列表
        tenantList: {
            type: Array,
            default: () => []
        },
        // 学段列表
        stageList: {
            type: Array,
            default: () => []
        },
        // 地区列表
        searchAreaList: {
            type: Array,
            default: () => []
        }
    },
    components: {
        DateRange
    },
    setup(props, context){
        // useStageList((data) => (state.stageList = data))
        const store = useStore();
        const route = useRoute();

        const dateRef = ref(null);
        // 状态数据
        const state = reactive({
            timer: null,
            // 地区选择框懒加载
            areaProp: {
                // lazy: true,
                checkStrictly: true
                // leaf: 'isLeaf',
                // value: 'areaId',
                // label: 'areaName'
                // lazyLoad(node, resolve) {
                //     const {value = '', level} = node
                //     useSearchAreaList((data = []) => {
                //         resolve(data)
                //     }, value)
                    
                // }
            },
            filterForm: { // 搜索
                    pageIndex: 1,
                    pageSize: 10
                },
                institutionList,
                institutionAttrList,
                institutionLevelList,
                institutionObj,
                institutionLevelObj,
                institutionAttrObj
                // stageList: [], // 学段列表
        })

        // 方法
        const methods = {
            
            // 列表搜索
            search (){
                state.filterForm.pageIndex = 1
                const { areaid = [] } = state.filterForm
                const { startTime, endTime } = dateRef.value.getDateRange()
                state.filterForm.createMinTime = startTime
                state.filterForm.createMaxTime = endTime
                state.filterForm.provinceId = areaid && areaid[0] || ''
                state.filterForm.cityId = areaid && areaid[1] || ''
                state.filterForm.districtId = areaid && areaid[2] || ''
                // methods.getList()
                context.emit('search', state.filterForm);
            },
            // 重置
            reset(){
                for (const key in state.filterForm) {
                    state.filterForm[key] = ''
                }
                dateRef.value.resetDateRange()
                state.filterForm.pageIndex = 1
                state.filterForm.pageSize = 10
                context.emit('search', state.filterForm)
                // methods.getList()
            }
        }

        // 计算属性
        const computes = {}

        onMounted(() => {
            // 联级选择器点击label也能选中
            state.timer = setInterval(function() {
                document.querySelectorAll('.el-cascader-node__label').forEach(el => {
                    el.onclick = function() {
                        if (el.previousElementSibling) el.previousElementSibling.click()
                    }
                })
            }, 1000)
            if(route.query?.institutionId) {
                state.filterForm.institutionId = route.query?.institutionId;
            }
            window.history.pushState('', '', route.path);
            methods.search();

        })
        onBeforeUnmount(() => {
            state.timer && clearInterval(state.timer)
        })

        return {
            ...toRefs(state),
            ...methods,
            ...computes,
            ...toRefs(props),
            dateRef
        }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

 
</style>

